<template>
	<!-- 关联客户 -->
	<view class="coreshop-flex coreshop-flex-direction">
	<view class="coreshop-flex coreshop-flex-nowrap coreshop-justify-between c-m-t-10">
		<view class="coreshop-flex c-m-l-10 c-m-r-10">
			<u-icon name="arrow-left" size="20" @click="hideModel" :bold="true"></u-icon>
		</view>
		<view class="coreshop-flex-sub">
			<u-search :clearabled="false"
				v-model="keyword"
				@custom="doSearch"
				placeholder="请输入公司名称或客户编码"   
				height="38" 
				:actionStyle="{width:'130rpx',height:'80rpx',background:'#2A8FFC','border-radius':'25px','margin':'0 20rpx','font-size':'28rpx',color:'#fff','line-height':'80rpx','text-align':'center'}"
				 :showAction="true" actionText="搜索" :animation="false"></u-search>
		</view>
	</view>
	
	<scroll-view class="scroll-box" scroll-y>
		<view class="c-m-t-20" style="border-top: 1px solid #E0E0E0;" v-if="clientList.length>0">
			<u-checkbox-group v-model="selectList" placement="column" @change="selectClient">
				<view class="coreshop-flex coreshop-flex-nowrap coreshop-justify-between" v-for="(item, index) in clientList" :key="index" style="border-bottom: 1px solid #F1F1F5;margin: 20rpx 20rpx;">
					<view class="c-m-b-10"><u--text :text="item.name"></u--text></view>	
					<view> 
						<u-checkbox activeColor="blue" :name="item.id"></u-checkbox> 
					</view>
				</view>
			</u-checkbox-group>
			<!-- 更多 -->
			<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
		</view>
		<view v-else class="over-hidden">
			<u-loadmore status="nomore" margin-top="40" margin-bottom="40" :load-text="{nomore:'暂无数据'}"/>
		</view>
	 </scroll-view>
	 
	 <view><u-button type="primary" text="确定" @click="selectSure"></u-button></view>
	</view>
</template>

<script>
	
	// import selectSubClient from '@/packagePlan/components/selectSubClient/index.vue';
	
	export default {
		data() {
			return {
				planIdx:'',//第几个事项
				planItem:[],
				selectList:[],//默认选中的人
				selectSub:{},//默认选中的下属
				
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				iconType: 'flower',
				loadText: {
				    loadmore: '轻轻上拉',
				    loading: '努力加载中',
				    nomore: '实在没有了'
				},
				currentPage: 1,
				key: '',
				searchData: {
					id:null,
				    where: {},
				    limit: 10,
				    page: 1 
				},
				
				
				list:[{name:'我的客户'},{name:'下属客户'}],
				current:0,
				showSub:false,
				showMask:false,
				subList:[],//下属列表
				
				keyword:'',
				clientList: [],
				datas:{},
				
				showSelectSubClient:false,//选择下属
				subid:'',//下属id
				subClientList:[] 
			}
		},
		props:{
			item:{
				type:Object,
				default:{}
			}
		},
		components:{
			// selectSubClient
		},
		// mounted() {
		// 	this.$nextTick(()=>{
		// 		setTimeout(()=>{
		// 			this.$refs.tabs.init();
		// 		},1000)
		// 	})
		// },
		created() {
			console.log('选择关联下属',this.item)
			this.datas = this.item; 
			if(this.item.glkh_me){  //单选
				this.selectList.push((+this.item.glkh_me[0].id));
			} 
			this.selectSub = this.item.glkh_sub || {};
			
			this.currentPage=1;
			this.list=[];
			this.getList(); 
		},
		// onShow() {
		// 	this.planItem = this.$store.state.planList;
		// 	this.selectSub = this.planItem[this.planIdx].GLKH_SUB || {};
		// },
		onReachBottom() {// 加载更多
		    if (this.loadStatus === 'loadmore') {
		        this.getDealerGoods()
		    }
		},
		methods:{ 
			hideModel(){
				// this.$emit('hideModel')
				this.$emit('update:showModel',false)
			},
			doSearch(){
				this.currentPage=1;
				this.list=[];
				this.getList(); 
			},
			getList(){
				let self=this;
				this.loadStatus = 'loading';
				 
				this.$u.api.getGLKH(this.conditions()).then(res => {
					uni.hideLoading();
					this.clientList = this._normalizeSinger(res.data || []);
					
					if (res.code > this.clientList.length) {
					    self.currentPage++
					    self.loadStatus = 'loadmore'
					} else {
					    self.loadStatus = 'nomore'
					}
				}).catch(() => {})
			},
			// 统一返回筛选条件 查询条件 分页
			conditions() {
				var where = {};
				if(this.keyword != ''){
					where = {
					    searchName: this.keyword
					};
				}
				this.searchData.where = where; 
				this.searchData.page = this.currentPage;
				
			    let data = this.searchData;
			    var newData = this.$u.deepClone(data);
			    if (data.where) {
			        newData.where = JSON.stringify(data.where);
			    } 
			    return newData;
			},
			getXSSJList(){
				this.$u.api._GetXSSJ().then(res => {
					this.subList = res.data.molist || [];
				}).catch(() => {})
			},
			
			change(index){
				this.current = index;
				if(index=='1'){
					this.getXSSJList();
					this.showSub = true;
					this.showMask = true;
				}else{
					this.showSub = false;
					this.showMask = false;
				}
			},
			hideMask(){
				this.showSub = false;
				this.showMask = false;
			},
			selectClient(e){ //选择
				 this.selectList=e;
			},
			selectSure(){ //确定
				// const me = this.selectList || [];
				// const sub = this.selectSub || {};
				// this.datas.glkh_me = me;
				// this.datas.glkh_sub = sub;
				// this.datas.glkhList = [...me,...(sub.list || [])]; 
				this.datas.glkhList =this.clientList.filter(c=>this.selectList.includes(c.id));
				
				this.$emit('update:item',this.datas);
				this.$emit('update:showModel',false);
			},

			bindShowSelectSubClient(id){
				this.selectSub.id = id;
				this.showSelectSubClient = true;
			},
			
			// updateItems(d){
			// 	this.selectSub = d;
			// 	this.showSelectSubClient = false;
			// },
			
			// hideSubClient(){
			// 	this.showSelectSubClient = false;
			// },
			_normalizeSinger(list){ 
				//let map = {};
				let ret = []
				list.forEach((item, index) => { 
					ret.push({
						id:item.id,
						name:`${item.name}(${item.companyName})`
					})
				 //  const key = item.id;
				 //  if (!map[key]) {
					// map[key] = {
					//   title: key,
					//   items: []
					// }
				 //  }
				  
				 //  const hasSelect = this.selectList.find(d=>{
				 //  	return d.id == item.KHJBXX.ID
				 //  })
				  
				 //  map[key].items.push({
					// name: item.KHJBXX.GSMC,
					// id: item.KHJBXX.ID,
					// checked: hasSelect ? true : false
				 //  })
				})
				// let ret = [], hot = [];
				// for (let key in map) {
				//   let val = map[key]
				//   if (val.title.match(/[a-zA-Z0-9]/)) {
				// 	ret.push(val)
				//   }
				// }
				// ret.sort((a, b) => {
				//   return a.title.charCodeAt(0) - b.title.charCodeAt(0)
				// })
				//return hot.concat(ret)
				return ret;
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.u-page{
		padding-top: 20rpx;
		padding-bottom: 120rpx;
		background: #F1F1F5;
		min-height: 80%;
		.u-top{
			background-color: #F1F1F5;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			padding-top: 10rpx;
			z-index: 99;
		}
		.list-box{
			background-color: #fff;
			margin-bottom: 20rpx;
		}
		.list-cell {
			height: 120rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			overflow: hidden;
			color: #333;
			font-size: 32rpx;
			margin: 0 40rpx;
			border-bottom: 1px solid #E5E5E5;
		} 
		.list-cell:nth-last-child(1){
			border: none;
		}
		.anchor-text {
			font-size: 28rpx;
			color: #666666;
			padding-left: 40rpx;
		}
		.tabs{
			width: 100%;
			height: 80rpx;
			.tab-list{
				line-height: 80rpx;
				font-size: 28rpx;
				color: #303133;
				text-align: center;
				&.active{
					color: $core-type-primary;
					position: relative;
					&::after{
						content: '';
						position: absolute;
						width: 154rpx;
						height: 2rpx;
						left: 50%;
						margin-left: -77rpx;
						bottom: 0;
						background: $core-type-primary;
						transition: all 0.5s;
					}
				}
			}
		}
		.sub-box{
			background-color: #fff;
			text-align: center;
			.sub-title{
				line-height: 80rpx;
				font-size: 28rpx;
				color: #7A808A;
			}
			.active{
				color: $core-type-primary;
			}
			.sub-btn{
				width: 100%;
				min-height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: $core-type-primary;
			line-height: 100rpx;
			z-index: 10;
		}
	}  
</style>